<style lang="scss" scoped>
        .viewDetailed{
          background: #fff;
          width: calc(100% - 430px);
          height: 100%;
          float: right;
          overflow: auto;
          .mainTask,.childTask{
            .mainTitle{
              background: #E2ECFA;
              height: 40px;
              border: 1px solid rgba(188, 188, 188, 0.28);
              line-height: 40px;
              padding: 0 10px;
              .imgLeft{
                width: 24px;
                float: left;
                margin-top: 8px;
              }
              p{
                float: left;
                margin-left: 22px;
                font-size: 14px;
              }
              .imgRight{
                width: 24px;
                float: right;
                margin-top: 8px;
                cursor: pointer;
              }
              .childdelete{
                float: right;
                margin-top: 6px;
                background: #FEF0F0;
                border: 1px solid #FBC4C4;
                color: #EB5454;
              }
            }
            .mainTitleActive{
              background: #E2F3D8;
            }
            .mainContent{
              background: #F3F7FB;
              padding: 10px;
              border: 1px solid #DCDCDC;
              .btnBox{
                line-height: 40px;
                font-size: 12px;
                height: 40px;
                text-align: center;
                margin-top: 1%;
              }
            }
            .mainContentActive{
              background: #F7FBF6;
            }
          }
          .childTask{
            width: 96%;
            margin: 0 auto;
            margin-top: 1%;
            .mainTitle{
              background: #EFEFEF;
              border: 1px solid rgba(188, 188, 188, 0.28);
              border-radius: 6px 6px 0 0;
            }
            .mainContent{
              background: #FFFFFF;
            }
          }
        }
.addCildBtn{
  width: 96%;
  height: 50px;
  font-size: 14px;
  margin: 0 auto;
  margin-top: 2%;
  text-align: center;
  margin-bottom: 2%;
  color: #448EF7;
  button{
    width: 100%;
    height: 100%;
    font-size: 14px;
  }
}
::v-deep{
  .el-form-item__label{
    font-size: 12px;
    font-weight: 600;
    padding: 0 18px 0 0;
  }
  .el-form-item__content{
    font-size: 12px;
    // font-weight: 600;
  }
  .el-form-item--small.el-form-item{
    margin-bottom: 6px;
  }
}

</style>
<template>
  <div class="viewDetailed">
    <!-- 主任务 -->
    <div v-show="showFilter" class="mainTask">
      <div class="mainTitle" :class="mainactive ? 'mainTitleActive' : ''">
        <img v-show="!mainactive" class="imgLeft" src="../../assets/img/task.png">
        <img v-show="mainactive" class="imgLeft" src="../../assets/img/task1.png">
        <p>{{ rightObj.name }}</p>
        <el-tooltip v-show="!mainactive" class="item" effect="dark" content="变更记录" placement="top">
          <img class="imgRight" src="../../assets/img/change.png" @click="gotobiangeng()">
        </el-tooltip>
      </div>
      <div class="mainContent" :class="mainactive ? 'mainContentActive' : ''">
        <bxFilter ref="filter" label-position="left" label-width="110px" :config="!mainactive ? config : indexconfig" :row="12" />
        <div class="btnBox">
          <el-button
            v-show="rightObj.approveStatus === '' || rightObj.approveStatus === null"
            type="danger"
            plain
            round
            @click="rejected(rightObj,'2')"
          >驳回</el-button>
          <el-button
            v-show="rightObj.approveStatus === '' || rightObj.approveStatus === null"
            type="success"
            plain
            round
            @click="rejected(rightObj,'1')"
          >同意</el-button>
          <el-button
            v-show="rightObj.approveStatus === '2'"
            type="danger"
            plain
            round
            @click="rejected(rightObj,'')"
          >撤销驳回</el-button>
          <el-button
            v-show="rightObj.approveStatus === '1'"
            type="success"
            plain
            round
            @click="rejected(rightObj,'')"
          >撤销同意</el-button>
        </div>
      </div>
    </div>
    <!-- 子任务 -->
    <div v-for="(item,index) in [...itemList,1,2,3,4,5]" v-show="!mainactive" :key="index" class="childTask">
      <div class="mainTitle">
        <img class="imgLeft" src="../../assets/img/task01.png">
        <p>{{ rightObj.name }} -- 子任务{{ item.targetIdentify }}</p>
      </div>
      <div class="mainContent">
        <bxFilter :ref="item.filter" label-position="left" label-width="110px" :config="config1" />
        <div class="btnBox">
          <el-button
            v-show="item.approveStatus === '' || item.approveStatus === null"
            type="danger"
            plain
            round
            @click="rejected(item,'2')"
          >驳回</el-button>
          <el-button
            v-show="item.approveStatus === '' || item.approveStatus === null"
            type="success"
            plain
            round
            @click="rejected(item,'1')"
          >同意</el-button>
          <el-button
            v-show="item.approveStatus === '2'"
            type="danger"
            plain
            round
            @click="rejected(item,'')"
          >撤销驳回</el-button>
          <el-button
            v-show="item.approveStatus === '1'"
            type="success"
            plain
            round
            @click="rejected(item,'')"
          >撤销同意</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  props: {
    mainactive: {
      type: Boolean,
      default: false
    },
    tabContent: {
      type: Object,
      default() {
        return {}
      }
    },
    rightObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      input: '',
      edit: '',
      childFilterList: ['filter1'],
      showFilter: true,
      itemList: [], // 子任务存放
      config: [
        {
          type: 'input',
          key: 'name',
          props: {
            label: '业绩维度：',
            showText: true
          }
        },
        {
          type: 'input',
          key: 'originalSelect',
          props: {
            label: '任务来源：',
            showText: true
          }
        },
        {
          type: 'input',
          key: 'finishTime',
          props: {
            label: '完成时间：',
            showText: true
          }
        },

        {
          type: 'input',
          key: 'weight',
          props: {
            label: '权重（%）：',
            showText: true
          }
        },
        {
          type: 'input',
          key: 'dimension',
          props: {
            label: '任务名称：',
            showText: true
          }
        },
        {
          type: 'input',
          key: 'originalInput',
          props: {
            label: '本季度完成情况',
            showText: false,
            placeholder: '请输入本季度完成情况'
          }
        },
        {
          type: 'input',
          key: 'approveContent',
          props: {
            label: '下季度工作计划',
            showText: false,
            placeholder: '请输入下季度工作计划'
          }
        },
        {
          type: 'textarea',
          key: 'content',
          span: 15,
          props: {
            label: '任务内容：',
            showText: true
          }
        },
        {
          type: 'textarea',
          key: 'approveContent',
          span: 15,
          props: {
            label: '定评意见',
            placeholder: '请输入您的意见...'
          }
        }
      ],
      indexconfig: [
        {
          type: 'input',
          key: 'name',
          props: {
            label: '指标名称：',
            showText: true,
            placeholder: '请输入指标名称'
          }
        },
        {
          type: 'input',
          key: 'dimension',
          props: {
            label: '业绩维度：',
            showText: true,
            placeholder: '请选择业务维度'
          }
        },
        {
          type: 'textarea',
          key: 'content',
          span: 15,
          props: {
            label: '指标描述及计算公式：',
            labelWidth: '140px',
            showText: true,
            placeholder: '请输入指标描述及计算公式'
          }
        },
        {
          type: 'input',
          key: 'target',
          props: {
            label: '指标目标：',
            showText: true,
            placeholder: '请输入目标值'
          }
        },
        {
          type: 'input',
          key: 'weight',
          props: {
            label: '权重（%）：',
            showText: true,
            placeholder: '请输入权重'
          }
        },
        {
          type: 'input',
          key: 'originalSelect',
          props: {
            label: '任务来源：',
            showText: true,
            placeholder: '请选择任务来源'
          }
        },
        {
          type: 'input',
          key: 'originalInput',
          props: {
            label: '来源说明：',
            showText: true,
            placeholder: '可列示来源文件名或编号'
          }
        },
        {
          type: 'textarea',
          key: 'approveContent',
          span: 15,
          props: {
            label: '审批意见：',
            edit: true,
            placeholder: '请输入您的意见...'
          }
        }
      ],
      config1: [
        {
          type: 'input',
          key: 'content',
          span: 12,
          props: {
            label: '业绩维度：',
            showText: true
          }
        },
        {
          type: 'input',
          span: 12,
          key: 'originalSelect',
          props: {
            label: '任务来源：',
            showText: true
          }
        },
        {
          type: 'input',
          span: 12,
          key: 'finishTime',
          props: {
            label: '完成时间：',
            showText: true
          }
        },
        {
          type: 'input',
          span: 12,
          key: 'weight',
          props: {
            label: '权重（%）：',
            showText: true
          }
        },
        {
          type: 'input',
          key: 'originalInput',
          span: 12,
          props: {
            label: '来源说明：',
            showText: true
          }
        },
        {
          type: 'textarea',
          key: 'approveContent',
          span: 15,
          props: {
            label: '审批意见：',
            edit: true,
            placeholder: '请输入您的意见...'
          }
        }
      ]
    }
  },
  watch: {
    mainactive(val) { // true => 关键指标  false=> 重要任务
    // 如果list为空是；右侧直接不显示
      if (val) {
        if (this.tabContent.indexList.length === 0) {
          this.showFilter = false
        }
      } else {
        this.showFilter = true
      }
    },
    rightObj(item) { // 点击传输过来的信息
      this.itemList = item.list
      this.dealInformation()
      this.$nextTick(() => {
        this.$refs.filter.setAllValue(item)
      })
    }
  },
  mounted() {
    if (this.$route.query.edit) {
      this.edit = this.$route.query.edit
    }
  },
  methods: {
    dealInformation() { // 处理子任务；给子任务绑定filter名字
      this.itemList.map((val, index) => {
        const str = 'filter' + (index + 1)
        val.filter = str
        this.$nextTick(() => {
          this.$refs[str][0].setAllValue(val)
        })
      })
    },
    // 取数据
    getSelfData() {
      const list = []
      const mainObj = this.$refs.filter.getAllItem()
      this.itemList.map((item, index) => {
        const str = item.filter
        const childObjObj = this.$refs[str][0].getAllItem()
        const result = this.itemList.find(v => v.filter === str)
        const concatChild = { ...result, ...childObjObj }
        list.push(concatChild)
      })
      const concatObj = { ...this.rightObj, ...mainObj }
      concatObj.list = list
      console.log(concatObj, '123456')
      return concatObj
    },
    // 驳回/同意/撤销
    rejected(item, val) {
      this.$parent.loadingState(true)
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01105',
        'methodName': 'saveAgree',
        'targetHistoryId': item.targetHistoryId,
        'approveStatus': val
      }).then((res) => {
        if (res.isSuccess) {
          // console.log(res)
          item.approveStatus = val
          this.$parent.loadingState(false)
        }
      })
    },
    // 变更记录
    gotobiangeng() {
      this.$router.push({
        path: '/changeRecord'
      })
    }
  }
}
</script>

